<template>
	<view class="user-time-card-item c-white" :class="info.status === 1||info.status === 2 ? 'user-time-card-item--no' : '' "
		:style="[info.background ? {backgroundColor:info.background} : {backgroundImage:`url(${$fullLink(info.backgroundUrl)})`}]" @tap="$goTo('/pages/user/timeCard/serviceList',{carId:info.cardId})">
		<view class="e-flex e-m-b-18">
			<view class="e-flex e-flex-1 e-m-r-20">
				<load-image mode="aspectFill" :size="['48rpx']" shape="circle" :src="info.storeLogo">
				</load-image>
				<view class="e-flex-1 e-line-1">
					<text class="e-p-l-18">{{info.storeName}}</text>
				</view>
			</view>
			<image src="/pages/user/static/icon2.png" class="img-40"></image>
		</view>
		<view class=" e-line-1">
			<text class="e-font-32 fw-600">{{info.headline}}</text>
		</view>
		<view class="user-time-card-item__bottom e-flex e-flex-between">
			<view class="e-font-32">
				<text>{{$unitEn}}</text>
				<text class="user-time-card-item__bottom-price">{{info.payMoney}}</text>
				<text>/{{info.exchangeSize}}{{$t('classify.次')}}</text>
			</view>
			<view class="e-font-26">
				<view class="e-m-b-8">
					<text v-if="info.isEffective === 1">{{$t('classify.永久有效')}}</text>
					<text v-else>{{timeFormat(info.effectiveTime, 'yyyy.mm.dd')}}{{$t('classify.前有效')}}</text>
				</view>
				<view v-if="info.isRf === 1">
					<text>{{txt}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {computed} from 'vue'
	import { timeFormat } from '@/common/utils'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type { UserTimeCardItem} from '@/common/request/api'
	const props = defineProps<{
		info ?: UserTimeCardItem
		
	}>()
	const ctx = useCurrentInstance()
	const txt = computed(() => {
		const str = ctx.$t('classify.timeCardTips2')
		return str.replace('-NUMBER1-', props.info?.limitDays||'').replace('-NUMBER2-', props.info?.limitNumber||'')
	})

</script>

<style lang="scss" scoped>
	.user-time-card-item {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 369rpx;
		border-radius: 20rpx;
		padding: 28rpx 30rpx 40rpx 30rpx;
		overflow: hidden;
		margin-bottom: 20rpx;

		&__bottom {
			padding-top: 102rpx;

			&-price {
				font-size: 80rpx;
			}
		}
	}
	.user-time-card-item--no{
		opacity: .5;
	}
</style>